<template>
	<div class="flex gap-1">
		<div
			v-for="item in listData"
			:key="item.id"
			class="min-w-14 h-6 px-2 rounded-sm flex justify-center items-center text-sm cursor-pointer app-bg-react"
			:class="isActive(item.id as BettingType) ? 'bg-primary text-white' : 'bg-bg-4 text-t-1'"
			@click="select(item.id as BettingType)">
			{{ item.text }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { BettingType, SportsType } from '@/enums'
import { enumList } from '@/utils'
import { useMarketStore } from '@/store'

const marketStore = useMarketStore()

const props = defineProps({
	sportId: {
		type: String as PropType<SportsType>,
		default: ''
	}
})

const listData = computed(() => {
	const res = enumList(BettingType)
	if (props.sportId === SportsType.badminton) {
		return res.filter((item: any) => item.id !== BettingType.ou)
	}
	return res
})

const isActive = (id: BettingType) => {
	const list = marketStore.filters[props.sportId]
	return !list || !list.includes(id)
}

const select = (id: BettingType) => {
	let list = marketStore.filters[props.sportId]
	if (list && list.includes(id)) {
		list = list.filter((item) => item !== id)
	} else {
		list = [...(list || []), id]
	}
	marketStore.setFilters(props.sportId, list)
}
</script>
